<template>
  <div class="container">
    <el-button type="primary" class="addBtn" @click="dialogAdd = true">添加周报时间段</el-button>
    <el-dialog title="添加时间段" :visible.sync="dialogAdd" width="60%">
      <!-- 添加周报参数 -->
      <div class="block">
        <!-- 周数选择器  -->
        <span class="demonstration">选择周数 </span>
        <el-input-number v-model="num" :min="1" :max="90" label="描述文字"></el-input-number>
        <!-- 日期选择器 -->
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>

      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAdd = false">取 消</el-button>
                <el-button type="primary" @click="submitWeekTime(value1)">添加</el-button>
            </span>
    </el-dialog>

    <div v-show="show">
      <el-card shadow="always">
        <el-table
          :data="weekTimeList"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
          >
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="起始时间"
          >
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="周次"
          >
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="showSelect(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[5, 10, 20, 30]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <div v-show="!show">
      <el-card shadow="always">
        <el-button type="text" @click="back">返回</el-button>
        <el-table
          :data="weekSummaryListById"
          border
          style="width: 100%">
          <el-table-column
            prop="username"
            label="填写者姓名"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="周报时间段"
          >
            <template slot-scope="scope">
              {{ weekTimeById.startTime }}----{{ weekTimeById.endTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="周次"
          >
            <template slot-scope="scope">
              {{ weekTimeById.number }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="showDetail">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-dialog id="dialog" title="周报内容" :visible.sync="dialogDetail">
        <!--        <div class="grid">-->
        <!--          <div class="card" style="border-right: none">项目名</div>-->
        <!--          <div class="card" style="border-right: none">完成内容</div>-->
        <!--          <div class="card" style="border-right: none">进度</div>-->
        <!--          <div class="card">下周计划</div>-->
        <!--        </div>-->
        <!--        <div class="gridItem" v-for="item in weekContentById">-->
        <!--          <div class="card" style="border-right: none">{{ item.proName }}</div>-->
        <!--          <div class="card" style="border-right: none">{{ item.content }}</div>-->
        <!--          <div class="card" style="border-right: none">{{ item.situation }}%</div>-->
        <!--          <div class="card">{{ item.nextPlan }}</div>-->
        <!--        </div>-->
        <el-table
          border
          :data="weekContentById"
          style="width: 100%">
          <el-table-column
            class-name="col"
            align="center"
            prop="proName"
            label="项目名"
          >
          </el-table-column>
          <el-table-column
            class-name="col"
            align="center"
            prop="content"
            label="完成内容"
          >
          </el-table-column>
          <el-table-column
            class-name="col"
            align="center"
            prop="situation"
            label="进度"
          >
            <template #default="prop">
              {{ prop.row.situation }}%
            </template>
          </el-table-column>
          <el-table-column
            class-name="col"
            align="center"
            prop="nextPlan"
            label="下周计划"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {addWeekTime, getWeekReportByTimeId, getWeekTime, getWeekTimeById} from "@/api/weekTime";

export default {
  name: 'weekReport',
  data() {
    return {
      dialogAdd: false,//显示添加周报弹出框
      value1: '',//时间选择器的值
      num: '',//计数器的值,
      queryParams: {
        startTime: "",
        endTime: "",
        number: ""
      },

      all: true,
      params: {
        pageSize: 5,
        pageNum: 1,
      },
      weekTimeList: [],
      total: 0,
      loading: false,

      weekSummaryListById: [],
      weekContentById: [],
      weekTimeById: [],
      show: true,
      dialogDetail: false,

      currentPage: 1
    }
  },
  methods: {
    //点击添加周报时间段
    submitWeekTime(data) {
      this.queryParams.startTime = data[0]
      this.queryParams.endTime = data[1]
      this.queryParams.number = this.num
      addWeekTime(this.queryParams).then(() => {
        this.$message({
          type: "success",
          message: "添加成功"
        })
        this.getWeekTimeList()
      })
      this.dialogAdd = false
    },

    // 获取数据
    getWeekTimeList() {
      this.loading = true
      getWeekTime(this.params).then(res => {
        this.weekTimeList = res.rows
        this.total = res.total
        this.loading = false
      })
    },

    handleSizeChange(value) {
      this.params.pageSize = value;
      this.getWeekTimeList()
    },
    handleCurrentChange(value) {
      this.params.pageNum = value;
      this.getWeekTimeList()
    },

    showSelect(id) {
      getWeekReportByTimeId(id).then(res => {
        if (res.rows) {
          this.weekSummaryListById = res.rows
          return getWeekTimeById(id)
        } else {
          this.$message({
            type: "error",
            message: "该时间段暂无周报"
          })
        }
      }).then(res => {
        this.weekTimeById = res.data
      })
      this.show = false
    },
    showDetail() {
      this.dialogDetail = true
      this.weekContentById = JSON.parse(this.weekSummaryListById[0].briefSummary);
    },
    back() {
      this.show = true
    }
  },
  mounted() {
    this.getWeekTimeList()
  }
}
</script>

<style>
.demonstration {
  margin-left: 30px;
}

.el-date-editor {
  margin-left: 30px;
}



.addBtn {
  margin-top: 20px;
  margin-left: 20px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-template-rows: 50px;
  transform: translateY(1px);
}


.gridItem {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-template-rows: auto;
  border-bottom: 1px solid rgba(66, 64, 64, 0.3);
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  font-size: 20px;
  padding: 20px;
}

/deep/ .el-dialog__body {
  border-radius: 5px;
}

#dialog > div {
  margin: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}


</style>
